<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DEMO</title>

    <!-- <link rel="stylesheet" type="text/css" href="node_modules/dplayer/dist/DPlayer.min.css" /> -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" type="text/javascript"></script>

    <script src="../node_modules/dplayer/dist/DPlayer.min.js" type="text/javascript"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> -->
</head>
<body>
<script id="debug"></script>
<div id="dplayer" style="width:500px;height:300px;"></div>
<div id="stats"></div>
<script type="text/javascript">
function init(){
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: true,
        video: {
            // url: 'https://vod8.wenshibaowenbei.com/20211014/B8KpeTBo/index.m3u8',
            // url: 'https://cdn1.91pic.org/20211128/vVSQ7jcx/index.m3u8',
            url: 'https://v10.dious.cc/20211105/fqeY6Nt2/index.m3u8',
            type: 'customHls',
            customType: {
                'customHls': function (video, player) {
                    const hls = new Hls({
                        debug: false,
                        // Other hlsjsConfig options provided by hls.js
                        p2pConfig: {
                            debug: true,
                            // announce: "http://127.0.0.1:3030",
                            // wsSignalerAddr: 'ws://127.0.0.1:3030/ws',

                            announce: "https://gop2p.cachecha.com",
                            wsSignalerAddr: 'wss://gop2p.cachecha.com/ws',

                            live: true,        
                            // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/en/
                        }
                    });
                    hls.loadSource(video.src);
                    hls.attachMedia(video);

                    hls.engine.on('stats', function (stats) {
                        // console.log(stats);
                        _totalP2PDownloaded = stats.totalP2PDownloaded;
                        _totalP2PUploaded = stats.totalP2PUploaded;
                        updateStats();
                    }).on('peerId', function (peerId) {
                        _peerId = peerId;
                    }).on('peers', function (peers) {
                        _peerNum = peers.length;

                        console.log("connected:",peers);
                        updateStats();
                    }).on("error",function(event,data){
                        console.log("Error:事件捕捉:",event,data);
                    });
                }
            }
        },
    });
    // console.log(dp);
}
// init();
var _peerNum = 0,_totalP2PUploaded=0,_totalP2PDownloaded=0;
function updateStats() {
    var text = 'P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
        + 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
    document.getElementById('stats').innerText = text
}

$('#debug').attr('src','../dist/p2p.js?v='+(new Date()).getTime());
$('#debug').on('load', function(){
    init();    
});


</script>

<div id="debug_info"></div>

</body>
</html>